<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{age}}
    <button @click="changeAge()">修改年龄</button>
    <table>
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
        </tr>
        <tr v-for="(item, index) in arr">
            <td>{{index+1}}</td>
            <td>{{item.username}}</td>
            <td>{{item.age}}</td>
            <td>{{item.gender}}</td>
        </tr>
    </table>
</div>
<button onclick="destroy()">取消挂载</button>
<!--1. 引入vue.js Vue3-->
<script src="./js/vue.js"></script>
<script>
    {
        // 指令
        // v-on:click/keyup 绑定事件 @click
        // v-model 表单元素的双向绑定
        // v-if 根据表达式的真假渲染或者不渲染某个元素
        // v-else-if 条件渲染
        // v-else
        // v-show 根据true/false切换display属性值
        // v-html 解析html标签
        // v-text 数据是什么样渲染的就是什么样
        // v-once 元素只渲染一次
        // v-bind: 绑定属性  :属性
        // v-for 遍历数组对象字符串等等 v-for="(item, index) in items" items 数组 item 每一个元素 index 元素的下标
        // vue 使用步骤
        // 2. 创建Vue对象 new Vue({})Vue.createApp({data函数, methods 属性})
        // data函数 : 数据
        // methods: 声明方法
    }
    const app = Vue.createApp({
        data() {
            return {
                name: "kaifamiao",
                age: 20,
                arr: []
            }
        },
        methods: {
            getData() {
                this.arr = [
                    {username: "张三", age: 20, gender: "男"},
                    {username: "李四", age: 21, gender: "女"},
                    {username: "王五", age: 22, gender: "女"},
                    {username: "孙六", age: 23, gender: "男"},
                ]
            },
            changeAge() {
                this.age ++;
            }
        },
        // 创建 -- 指的是vue实例也就是 createApp 完成
        beforeCreate() { // 创建之前
            console.group('------beforeCreate创建前状态------');
            console.log(this.$el); // null
            console.log(this.$data); // {}
            console.log(this.name); //undefined
        },
        created() {
            console.group('------created创建完成状态------');
            console.log(this.$el); // null
            console.log(this.$data); // {name,age.arr}
            console.log(this.name); // "kaifamiao"
            this.getData()
            console.log(this.arr)
        },
        beforeMount() { // 挂载之前 mount() 执行之前
            console.group('------beforeMount挂载之前状态------');
            console.log(this.$el); // null
            console.log(this.$data); // {name,age.arr}
            console.log(this.name); // "kaifamiao"
        },
        mounted() { // 挂载完成之后 mount() 执行完毕
            console.group('------mounted挂载完成状态------');
            console.log(this.$el); // 页面上的dom元素
            console.log(this.$data); // {name,age.arr}
            console.log(this.name); // "kaifamiao"
        },
        beforeUnmount() { // unmount 执行之前
            console.group('------beforeUnmount取消挂载之前状态------');
            console.log(this.$el); // ""
            console.log(this.$data); // {name,age.arr}
            console.log(this.name); // "kaifamiao"
        },
        unmounted() { // unmount 执行完毕
            console.group('------Unmount取消挂载完成状态------');
            console.log(this.$el); // ""
            console.log(this.$data); // {name,age.arr}
            console.log(this.name); // "kaifamiao"
        },
        beforeUpdate() { // 数据发生改变，视图重新渲染部分内容之前触发
            console.group('------beforeUpdate修改之前状态------');
            console.log(this.$el); // 页面上的dom元素
            let innerHTML = document.querySelector("#app").innerHTML;
            console.log(innerHTML)
            console.log(this.$data); // {name,age.arr}
            console.log(this.name); // "kaifamiao"
        },
        updated() { // 数据发生改变，视图重新渲染部分内容完成之后触发
            console.group('------updated修改完成状态------');
            console.log(this.$el); // 页面上的dom元素
            let innerHTML = document.querySelector("#app").innerHTML;
            console.log(innerHTML)
            console.log(this.$data); // {name,age.arr}
            console.log(this.name); // "kaifamiao"
        }

    })
    // 3. 挂载 (选择器)
    const vm = app.mount("#app")
    function destroy() {
        console.log("destroy")
        app.unmount() // 销毁实例
    }
    // vm.getData()

</script>
</body>
</html>